<script setup lang="ts">
// // 有个规则：有默认值的参数，就是可选的，不用加?号！！！
// const formatTime = (date: Date | string = new Date()): string => {
//   if (typeof date === 'string') date = new Date(date);
//   const h = date.getHours();
//   const m = date.getMinutes();
//   const s = date.getSeconds();
//   return `${h}:${m}:${s}`;
// };

// #region 案例代码
// 数据结构：[ { times, time }, { times, time }, ... ]
type History = { times: number; time: string };
// const HistoriesKey = 'HistoriesKey'
enum LocalStorageKey {
  HistoriesKey = 'HistoriesKey',
}
// const histories: History[] = []; // 初始值要从本地存储读取，不能直接是个空数组
// const histories: History[] = JSON.parse(localStorage.getItem(HistoriesKey) || '[]'); // localStorage 的 key 用枚举类型做会更合适
const histories: History[] = JSON.parse(
  localStorage.getItem(LocalStorageKey.HistoriesKey) || '[]'
);
histories.push({
  times: histories.length + 1,
  time: new Date().toLocaleTimeString(),
});
localStorage.setItem(LocalStorageKey.HistoriesKey, JSON.stringify(histories));
// #endregion
</script>

<template>
  <ul>
    <li v-for="(v, i) of histories" :key="i">
      次数：{{ v.times }}，时间：{{ v.time }}
    </li>
  </ul>
</template>
